<template>
  <a-row :class="['p-4', `${prefixCls}--box`]" type="flex" :gutter="10">
    <a-col :xl="defectXl" :lg="24" :md="24" style="margin-bottom: 10px;margin-left: -10px;">
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-col :span="12">
          <a-form-item label="项目" v-bind="validateInfos.projectId">
	          <j-search-select v-model:value="formData.projectId" dict="tm_project,project_name,id" placeholder="请选择项目" :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="简历" v-bind="validateInfos.resumeId">
	          <j-dict-select-tag v-model:value="formData.resumeId" dictCode="tm_resume,real_name,id" placeholder="请选择简历" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="面试结果" v-bind="validateInfos.resumeInterviewResult">
	          <j-dict-select-tag v-model:value="formData.resumeInterviewResult" dictCode="resume_interview_result" placeholder="请选择面试结果" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="面试评价" v-bind="validateInfos.resumeEvaluate">
	          <a-textarea v-model:value="formData.resumeEvaluate" :rows="4" placeholder="请输入面试评价" :disabled="disabled"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</a-col>
    <a-col :xl="recordXl"  style="margin-bottom: 10px;width:500px">
      <div style="margin-left: 10px;">
      <timeline>
    <timeline-item v-for="(rec, index) in records" :key="index">
      面试官: {{ rec.interviewer }}<br/>
      <div style="margin-left:10px;" v-if="rec.resumeEvaluate">
          面试结果:
          {{ rec.resumeInterviewResult == 1 ? '通过': '不通过'}}<br/>
          面试评价:
          {{ rec.resumeEvaluate }}
      </div>
    </timeline-item>
  </timeline>
  </div>
    </a-col>
  </a-row> 
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
  import { getValueType } from '/@/utils';
  import { saveOrUpdate,queryResumeEvaluateList } from '../ResumeEvaluate.api';
  import { Form } from 'ant-design-vue';
  import { Timeline, TimelineItem } from 'ant-design-vue';

  const defectXl = ref<number>(14);
  const recordXl = ref<number>(10);
  const showFlag = ref<boolean>(true);
  const props = defineProps({
    formDisabled: { type: Boolean, default: false },
    formData: { type: Object, default: ()=>{} },
    formBpm: { type: Boolean, default: true }
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    projectId: '',
    resumeId: '',
    resumeInterviewResult: '',
    resumeEvaluate: '',
  });

  const formRecordData = reactive<Record<string, any>>({
    projectId: '',
    resumeId: '',
  });
  const { createMessage } = useMessage();
  const labelCol = ref<any>({style: { width: '100px' }})
  const wrapperCol = ref<any>({});
  // const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  // const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  //表单验证
  const validatorRules = {
    projectId: [{ required: true, message: '请输入项目!'},],
    resumeId: [{ required: true, message: '请输入简历!'},],
    resumeInterviewResult: [{ required: true, message: '请输入面试结果!'},],
    resumeEvaluate: [{ required: true, message: '请输入面试评价!'},],
  };
  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });

  let records=ref([
  //   // {interviewer:'d',resumeEvaluate:'dd'},
  //   // {interviewer:'d1',resumeEvaluate:'dd1'}
  ]);
  let ress=[];

  // const records = computed(async ()=>{
  //   await queryResumeEvaluateList(formData.resumeId).then((res) => {
  //       ress =  res
  //     });
  //     return ress;
  // });
  // 表单禁用
  const disabled = computed(()=>{
    if(props.formBpm === true){
      if(props.formData.disabled === false){
        return false;
      }else{
        return true;
      }
    }
    return props.formDisabled;
  });

  // onMounted(async () => {
  //   await queryResumeEvaluateList(formData.resumeId).then((res) => {
  //       records = res
  //     }).finally(() => {
  //     });
  // })

  /**
   * 新增
   */
  function add() {
    edit({});
  }

  async function addResumeEvaluate(record) {
    console.log("record:" + JSON.stringify(record))
    nextTick( async() => {
      await queryResumeEvaluateList(record.id).then((res) => {
        records.value = res
      });
    });
    // console.log("records:" + JSON.stringify(records))
    // // formRecordData.projectId = record.projectId;
    formRecordData.resumeId = record.id;
    edit(formRecordData);
  }
  /**
   * 编辑
   */
   async function edit(record) {
    records.value=[]
    console.log('edit:' + JSON.stringify(record));
      // await queryResumeEvaluateList(record.resumeId).then((res) => {
      //   records.value= res
      // });
      // console.log("edit-records:" + JSON.stringify(records))
     nextTick( () => {
      resetFields();
      const tmpData = {};
      Object.keys(formData).forEach((key) => {
        if(record.hasOwnProperty(key)){
          tmpData[key] = record[key]
        }
      })
      //赋值
      Object.assign(formData, tmpData);
    });
  }

  /**
   * 提交数据
   */
  async function submitForm() {
    // 触发表单验证
    await validate();
    confirmLoading.value = true;
    const isUpdate = ref<boolean>(false);
    //时间格式化
    let model = formData;
    if (model.id) {
      isUpdate.value = true;
    }
    //循环数据
    for (let data in model) {
      //如果该数据是数组并且是字符串类型
      if (model[data] instanceof Array) {
        let valueType = getValueType(formRef.value.getProps, data);
        //如果是字符串类型的需要变成以逗号分割的字符串
        if (valueType === 'string') {
          model[data] = model[data].join(',');
        }
      }
    }
    await saveOrUpdate(model, isUpdate.value)
      .then((res) => {
        if (res.success) {
          createMessage.success(res.message);
          emit('ok');
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        confirmLoading.value = false;
      });
  }


  defineExpose({
    add,
    edit,
    submitForm,
    addResumeEvaluate
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    height: 300px !important;
    overflow-y: auto;
    padding: 14px;
  }
</style>
